<template>
	<view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="收藏商品" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<block v-if="list.length">
			<u-swipe-action>
				<u-swipe-action-item :index="index" :name="index" v-for="(item, index) in list" :key="item.id"
					@click="onClick" :options="options">
					<view
						class="coreshop-padding-10 coreshop-padding-bottom-0 coreshop-solid-bottom coreshop-display-flex coreshop-flex-nowrap coreshop-percent-100 coreshop-bg-white"
						@click="goGoodsDetail(item.goodsId)">
						<u-avatar :src="item.goods.image" shape="square" size="60" class="coreshop-margin-10">
						</u-avatar>
						<view class="title-wrap coreshop-padding-left-10">
							<text class="coreshop-text-left coreshop-font-14 u-line-2">{{ item.goods.name }}</text>
							<view class="coreshop-margin-top-10">
								<u-icon name="clock" :label="item.createTime" labelSize="12"></u-icon>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20"
				margin-bottom="20" />
		</block>
		<!-- 无数据时默认显示 -->
		<view class="coreshop-emptybox" v-else>
			<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/collect.png'" icon-size="150" text="暂无收藏"
				mode="list"></u-empty>
		</view>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
						text: '预览',
						style: {
							backgroundColor: '#3c9cff',
						}
					},
					{
						text: '取消',
						style: {
							backgroundColor: '#f9ae3d'
						}
					}
				],
				page: 1,
				limit: 10,
				list: [], // 商品浏览足迹
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			};
		},
		onLoad() {
			this.goodsCollectionList()
		},
		onReachBottom() {
			if (this.status === 'loadmore') {
				this.goodsCollectionList()
			}
		},
		methods: {
			goodsCollectionList() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.status = 'loading '
				this.$u.api.goodsCollectionList(data).then(res => {
					if (res.status) {
						let _list = res.data.list;
						_list.forEach(item => {
							item.show = false;
						})
						this.list = [...this.list, ..._list]

						if (res.data.count > this.list.length) {
							this.page++
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 操作处理
			onClick(e) {
				var that = this;
				var goodsId = this.list[e.name].goodsId;
				if (e.index == 0) {
					this.$u.route('/pages/goods/goodDetails/goodDetails', {
						id: goodsId
					});
				} else {
					let data = {
						id: goodsId
					}
					this.$u.api.goodsCollection(data).then(res => {
						if (res.status) {
							that.$refs.uToast.show({
								message: res.msg,
								type: 'success',
								complete: function() {
									that.$nextTick(() => {
										that.list.splice(e.name, 1)
									})
								}
							})
						} else {
							this.$u.toast(res.msg)
						}
					})
				}
			},
		}
	};
</script>


<style lang="scss" scoped>
</style>
